@charset "UTF-8";

:root {
  --font-l: "HarmonyOS Sans";
  --font-r: "HarmonyOS Sans";
  --font-m: "HarmonyOS Sans";
  --font-b: "HarmonyOS Sans";
}
:root {
  --font-w-l: 400;
  --font-w-r: 400;
  --font-w-m: 500;
  --font-w-b: 700;
}

/* typography tokens */
@media screen and (min-width: 650px) {
  :root {
    /* pc */
    /* number */
    --component-details-page-height-subhead-3: 1.4rem;
    --component-details-page-height-head-1: 3.6rem;
    --component-details-page-size-subhead-3: 1.2rem;
    --component-details-page-size-subhead-1: 2rem;
    --component-details-page-size-head-1: 3rem;
    --component-home-page-height-subhead-2: 1.65rem;
    --component-home-page-size-subhead-2: 1.4rem;
    --semantic-corner-radius-mid: 1rem;
    --semantic-corner-radius-max: 1.5rem;
    --semantic-height-footnote: 0.95rem;
    --semantic-height-body-3: 1.35rem;
    --semantic-height-subhead-3: 1.4rem;
    --semantic-height-body-2: 1.5rem;
    --semantic-height-body-1: 1.65rem;
    --semantic-height-subhead-2: 1.65rem;
    --semantic-height-subhead-1: 2.4rem;
    --semantic-height-head-3: 2.85rem;
    --semantic-height-head-2: 3.2rem;
    --semantic-height-head-1: 3.6rem;
    --semantic-size-footnote: 0.8rem;
    --semantic-size-body-3: 0.9rem;
    --semantic-size-body-2: 1rem;
    --semantic-size-body-1: 1.1rem;
    --semantic-size-subhead-3: 1.2rem;
    --semantic-size-subhead-2: 1.4rem;
    --semantic-size-subhead-1: 2rem;
    --semantic-size-head-3: 2.4rem;
    --semantic-size-head-2: 2.7rem;
    --semantic-size-head-1: 3rem;
    --semantic-spacing-head-body: 1.5rem;
  }
}

@media screen and (max-width: 649px) {
  :root {
    /* wap */
    /* number */
    --component-details-page-height-subhead-3: 0.95rem;
    --component-details-page-height-head-1: 1.4rem;
    --component-details-page-size-subhead-3: 0.7rem;
    --component-details-page-size-subhead-1: 1rem;
    --component-details-page-size-head-1: 1.2rem;
    --component-home-page-height-subhead-2: 0.65rem;
    --component-home-page-size-subhead-2: 0.55rem;
    --semantic-corner-radius-mid: 0.4rem;
    --semantic-corner-radius-max: 0.6rem;
    --semantic-height-footnote: 0rem;
    --semantic-height-body-3: 0.7rem;
    --semantic-height-body-2: 0.8rem;
    --semantic-height-subhead-2: 0.8rem;
    --semantic-height-body-1: 0.95rem;
    --semantic-height-subhead-1: 1.3rem;
    --semantic-height-subhead-3: 1.35rem;
    --semantic-height-head-1: 1.65rem;
    --semantic-height-head-3: 1.8rem;
    --semantic-height-head-2: 1.95rem;
    --semantic-size-footnote: 0rem;
    --semantic-size-body-2: 0.6rem;
    --semantic-size-body-3: 0.6rem;
    --semantic-size-body-1: 0.7rem;
    --semantic-size-subhead-2: 0.7rem;
    --semantic-size-subhead-3: 0.9rem;
    --semantic-size-subhead-1: 1rem;
    --semantic-size-head-2: 1.2rem;
    --semantic-size-head-3: 1.2rem;
    --semantic-size-head-1: 1.4rem;
    --semantic-spacing-head-body: 0.8rem;
  }
}

/* color token */
.wt {
  /* light */
  /* color */
  --component-button-bg-lowest: #00000014;
  --component-button-bg-select-blue: #4d7fff;
  --component-button-bg-select-default: #000000b2;
  --component-button-bg-unselect: #00000014;
  --component-button-border-lowest: #cccccc12;
  --component-button-icon-select: #ffffff;
  --component-button-icon-select-blue: #ffffff;
  --component-button-icon-unselect: #0000004d;
  --semantic-background-level-1: #ffffff;
  --semantic-background-level-2: #fafafa;
  --semantic-background-level-3: #f6f6f6;
  --semantic-background-level-4: #d9d9d9;
  --semantic-icon-invert-level-1: #ffffff;
  --semantic-icon-invert-level-2: #ffffff8c;
  --semantic-icon-invert-unselect: #ffffff80;
  --semantic-icon-level-1: #000000;
  --semantic-icon-level-2: #0000008c;
  --semantic-icon-unselect: #00000080;
  --semantic-surface-dark-level-1: #000000;
  --semantic-surface-dark-level-2: #333333;
  --semantic-surface-dark-level-3: #4d4d4d;
  --semantic-surface-light-level-1: #bfbfbf;
  --semantic-surface-light-level-2: #d9d9d9;
  --semantic-surface-light-level-3: #e0e0e0;
  --semantic-surface-light-level-4: #ebebeb;
  --semantic-surface-light-level-5: #f6f6f6;
  --semantic-surface-light-level-6: #fafafa;
  --semantic-surface-light-level-7: #ffffff;
  --semantic-surface-opacity-level-1: #000000b2;
  --semantic-surface-opacity-level-2: #0000008c;
  --semantic-surface-opacity-level-3: #00000059;
  --semantic-surface-opacity-level-4: #00000014;
  --semantic-text-body-invert-level-1: #ffffff;
  --semantic-text-body-invert-level-2: #ffffff8c;
  --semantic-text-body-invert-unselect: #ffffff4d;
  --semantic-text-body-level-1: #000000;
  --semantic-text-body-level-2: #0000008c;
  --semantic-text-body-unselect: #0000004d;
  --semantic-text-head-blue: #4d7fff;
  --semantic-text-head-invert-level-1: #ffffff;
  --semantic-text-head-level-1: #000000;
  --semantic-text-head-level-2: #000000f2;
  --semantic-text-subhead-invert-level-1: #ffffff;
  --semantic-text-subhead-invert-level-2: #ffffff8c;
  --semantic-text-subhead-invert-unselect: #ffffff4d;
  --semantic-text-subhead-level-1: #000000;
  --semantic-text-subhead-level-2: #0000008c;
  --semantic-text-subhead-unselect: #0000004d;
}

.bk {
  /* dark */
  /* color */
  --component-button-bg-lowest: #ffffff1a;
  --component-button-bg-select-blue: #325ecf;
  --component-button-bg-select-default: #ffffff;
  --component-button-bg-unselect: #ffffff40;
  --component-button-border-lowest: #ffffff12;
  --component-button-icon-select: #000000;
  --component-button-icon-select-blue: #ffffff;
  --component-button-icon-unselect: #ffffff4d;
  --semantic-background-level-1: #000000;
  --semantic-background-level-2: #0d0d0d;
  --semantic-background-level-3: #1a1a1a;
  --semantic-background-level-4: #282828;
  --semantic-icon-invert-level-1: #000000;
  --semantic-icon-invert-level-2: #00000080;
  --semantic-icon-invert-unselect: #00000080;
  --semantic-icon-level-1: #ffffff;
  --semantic-icon-level-2: #ffffff80;
  --semantic-icon-unselect: #ffffff80;
  --semantic-surface-dark-level-1: #ffffff;
  --semantic-surface-dark-level-2: #d9d9d9;
  --semantic-surface-dark-level-3: #bfbfbf;
  --semantic-surface-light-level-1: #4d4d4d;
  --semantic-surface-light-level-2: #404040;
  --semantic-surface-light-level-3: #333333;
  --semantic-surface-light-level-4: #282828;
  --semantic-surface-light-level-5: #1a1a1a;
  --semantic-surface-light-level-6: #0d0d0d;
  --semantic-surface-light-level-7: #000000;
  --semantic-surface-opacity-level-1: #ffffffbf;
  --semantic-surface-opacity-level-2: #ffffffa6;
  --semantic-surface-opacity-level-3: #ffffff73;
  --semantic-surface-opacity-level-4: #ffffff4d;
  --semantic-text-body-invert-level-1: #000000;
  --semantic-text-body-invert-level-2: #00000080;
  --semantic-text-body-invert-unselect: #0000004d;
  --semantic-text-body-level-1: #ffffff;
  --semantic-text-body-level-2: #ffffff80;
  --semantic-text-body-unselect: #ffffff4d;
  --semantic-text-head-blue: #4d79ff;
  --semantic-text-head-invert-level-1: #000000;
  --semantic-text-head-level-1: #ffffff;
  --semantic-text-head-level-2: #fffffffa;
  --semantic-text-subhead-invert-level-1: #000000;
  --semantic-text-subhead-invert-level-2: #00000080;
  --semantic-text-subhead-invert-unselect: #0000004d;
  --semantic-text-subhead-level-1: #ffffff;
  --semantic-text-subhead-level-2: #ffffff80;
  --semantic-text-subhead-unselect: #ffffff4d;
}